<style type="text/css">
.control-group .edit {
	display: none;
}
.control-group .read {
	padding: 4px 0;
}
</style>
<div class="pull-left span9">
	<form method="post" class="form-horizontal form-profile" style="width: 600px; margin-left: 40px;">
		<fieldset>
			<legend>ข้อมูลส่วนตัว<br /><small>สำหรับลูกค้าที่ต้องการใบกำกับภาษี ข้อมูลนี้จะถูกนำไปใช้ในการออกใบกำกับภาษี</small></legend>
			<div class="control-group">
				<label class="control-label">ชื่อ-นามสกุล</label>
				<div class="controls">
					<div class="read name"><?php echo empty($params['account']['name'])? '-':$params['account']['name'];?></div>
					<input type="text" name="name" class="edit name" value="<?php echo $params['account']['name'];?>" />
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">email</label>
				<div class="controls">
					<div class="read email"><?php echo empty($params['account']['email'])? '-':$params['account']['email'];?></div>
					<input type="text" name="email" class="edit email" value="<?php echo $params['account']['email'];?>" />
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">ที่อยู่</label>
				<div class="controls">
					<div class="read email"><?php echo empty($params['account']['address'])? '-':$params['account']['address'];?></div>
					<textarea rows="" cols="" name="address" class="edit address"><?php echo $params['account']['address'];?></textarea>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">เลขบัตรประจำตัวประชาชน</label>
				<div class="controls">
					<div class="read email"><?php echo empty($params['account']['peopleId'])? '-':$params['account']['peopleId'];?></div>
					<input type="text" name="peopleId" class="edit peopleId" value="<?php echo $params['account']['peopleId'];?>" />
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">โทรศัพท์</label>
				<div class="controls">
					<div class="read email"><?php echo empty($params['account']['phone'])? '-':$params['account']['phone'];?></div>
					<input type="text" name="phone" class="edit phone" value="<?php echo $params['account']['phone'];?>" />
				</div>
			</div>
			<div class="control-group">
				<div class="controls">
					<span class="edit"><button type="submit" class="btn btn-primary">Save Change</button></span>
					<span class="read"><button class="btn btn-inverse change-mode-profile">Edit</button></span>
				</div>
			</div>
		</fieldset>
	</form>
	<form method="post" style="width: 600px; margin-left: 40px;">
		<fieldset>
			<legend>เอกสารเพิ่มเติม</legend>
			<label>สำเนาบัตรประชาชนหรือสำเนาบัตรที่ทางราชการออกให้ รองรับนามสกุล png, jpg, gif</label>
			<div><img class="cardImg" style="max-width: 840px; display: none;" src="img/card/<?php echo $params['account']['cardPath'];?>" /></div>
			<input type="file" name="card" class="card" />
			<br />
			<button class="btn uploadCard">upload</button>
			<div class="hide alert fade uploadCardMessage"></div>
		</fieldset>
	</form>
	<form method="post" class="form-horizontal" style="width: 600px; margin-left: 40px;">
		<fieldset>
			<legend>เปลี่ยน password</legend>
			<div class="control-group">
				<label class="control-label">old password</label>
				<div class="controls">
					<input type="password" name="oldPassword" class="oldPassword" value="" />
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">new password</label>
				<div class="controls">
					<input type="password" name="newPassword" class="newPassword" value="" />
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">repeat new password</label>
				<div class="controls">
					<input type="password" name="repeat-newPassword" class="repeat-newPassword" value="" />
					<div class="hide alert fade changePasswordMessage"></div>
				</div>
			</div>
			<div class="control-group">
				<div class="controls">
					<button type="submit" class="btn btn-primary changePassword">Change Password</button>
				</div>
			</div>
		</fieldset>
	</form>
</div>
<div class="clear"></div>
<script type="text/javascript">
$(function(){
	$('.change-mode-profile').click(function(event){
		event.preventDefault();
		$('.form-profile .read').hide();
		$('.form-profile .edit').show();
	});
	
	var sending = false;
	var cardImg = $('.cardImg');
	cardImg.load(function(){
		cardImg.show();
	});
	
	$('.uploadCard').click(function(event){
		event.preventDefault();
		if(sending == true) return;
		
		$('.uploadCard').button('loading');
		
		var formData = new FormData;
		formData.append('card', $('.card')[0].files[0]);
		formData.append('operation', 'uploadCard');
		
		var xhr = new XMLHttpRequest;
		
		xhr.onload = function(){
			sending = false;
			$('.uploadCard').button('reset');
			var data = JSON.parse(this.responseText);
			if(!data.success){
				if(typeof data.message != 'undefined'){
					$('.uploadCardMessage').text(data.message).removeClass('hide').addClass('in');
					return;
				}
				$('.uploadCardMessage').text('Upload failed').removeClass('hide').addClass('in');
				return;
			}
			cardImg.attr('src', data.cardPath);
		};
		xhr.onerror = function(){
			$('.uploadCard').button('reset');
			sending = false;
		};

		xhr.open('POST', 'index.php?page=user/profile.rest', false);
		xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
		sending = true;
		xhr.send(formData);
	});
});

$(function(){
	var oldPass = $('.oldPassword');
	var newPassword = $('.newPassword');
	var newPasswordRepeat = $('.repeat-newPassword');
	var changePassword = $('.changePassword');

	var changePasswordMessage = $('.changePasswordMessage');
	
	changePassword.click(function(event){
		event.preventDefault();
		changePasswordMessage.removeClass('in');
		if(newPassword.val() != newPasswordRepeat.val()){
			changePasswordMessage.text('password ไม่ตรงกัน').removeClass('hide').addClass('in').removeClass('alert-success');
			return;
		}
        changePassword.button('loading');
		$.post('index.php?page=user/profile.rest', { operation: 'changePassword', oldPassword: oldPass.val(), newPassword: newPassword.val() }, function(data){
            changePassword.button('reset');
            if(data.success){
				changePasswordMessage.text('เปลี่ยน password แล้ว').removeClass('hide').addClass('in').addClass('alert-success');
				oldPass.val('');
				newPassword.val('');
				newPasswordRepeat.val('');
			}
			else{
				if(typeof data.message == 'undefined') data.message = 'change password failed';
				changePasswordMessage.text(data.message).removeClass('hide').addClass('in').removeClass('alert-success');
			}
		}, 'JSON');
	});
});
</script>